<script setup lang="ts">
import { ref,onMounted } from 'vue';
import { dosendmsgcode } from '@/api/register'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter()

const value = ref('');
const showKeyboard = ref(true);

const tel = ref(window.localStorage.getItem('tel'))

const sms = ref(1)

onMounted(()=>{
    dosendmsgcode({tel:window.localStorage.getItem('tel')||''}).then(res=>{
        console.log(res)
        sms.value = res.data.data
    })
})

function onSubmit() { 
    if(value.value!==String(sms.value)){
        return showFailToast('验证码错误')
    }

    showSuccessToast("验证成功")
    router.push('/register/step3')
}
</script>

<template>
    <div>
        <h1>输入验证码</h1>
        <p>验证码已发送至{{ tel }}</p>

        <van-password-input :value="value" :mask="false" :focused="showKeyboard" @focus="showKeyboard = true" />
        <!-- 数字键盘 -->
        <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />

        <!-- <p>{{ }}秒后重新发送</p> -->

        <van-form @submit="onSubmit">
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    下一步
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<style lang="scss" scoped>
h1,
p {
    margin-left: 8%;
}
</style>